<template>
    <div>
        <el-page-header @back="goBack" content="库存流水"></el-page-header>
        <div class="common_line common_line_margin"></div>
        <div class="header">
            <img :src="stockInfo.imageUrl" alt="">
            <div class="right">
                <div>{{ '商品名称：'+stockInfo.title }}</div>
                <div>{{ '单位：'+stockInfo.unitName }}</div>
                <div>{{ '入库总数：'+stockInfo.inbound }}</div>
                <div>{{ '出库总数：'+stockInfo.outbound }}</div>
            </div>
        </div>
        <el-table border :data="flowList" style="margin-top: 15px;" :max-height="tableHeight">
            <el-table-column label="单据日期" align="center" prop="bound_date" />
            <el-table-column label="客户/供货商" align="center" prop="cusName" />
            <el-table-column label="单据编号" align="center" prop="order_no_sn" />
            <el-table-column label="单据类型" align="center" prop="orderType" />
            <el-table-column label="增加数量" align="center" prop="add_num" />
            <el-table-column label="减少数量" align="center" prop="reduce_num" />
            <el-table-column label="库存结余" align="center" prop="end_num" />
            <el-table-column label="操作" width="130" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="text"
                        v-if="scope.row.id !== 0"
                        @click="handleOrderInfo(scope.row)"
                        style="font-weight: bold;"
                    >单据详情</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import { getStockingFlow } from '@/api/statistics';
export default {
    name: 'stockingFlow',
    data() {
        return {
            stockInfo: {},
            flowList: [],
            tableHeight: 420,
            params: {
                corp: '',
                goods_id: '',
                min_id: 0,
                num: 30
            },
            isLoading: false,  // 防止重复请求
            total: 0
        }
    },
    props: {
        option: {
            type: Object
        }
    },
    mounted() {
        if (window.innerHeight > 1000) {
            this.tableHeight = window.innerHeight - 400
        }
        this.stockInfo = this.option
        this.params.corp = this.option.corp
        this.params.goods_id = this.option.id
        this.getFlowList()
        let that = this
        this.$nextTick(() => {
            document.getElementsByClassName('el-table__body-wrapper')[0].addEventListener('scroll', that.handleScroll)
        })
    },
    methods: {
        goBack() {
            this.$emit('hidden')
        },
        handleScroll(e) {
            const { scrollTop, scrollHeight, clientHeight } = e.target;
             // 触底判断（留1px容差避免精度问题）
            if (scrollHeight - (scrollTop + clientHeight) <= 1) {
                console.log('触底加载');
                if (this.total===this.flowList.length || this.isLoading) return
                this.isLoading = true
                this.getFlowList();
            }
        },
        getFlowList() {
            let that = this
            getStockingFlow(this.params).then(res => {
                let list = res.data.list.filter(item => {
                    let {name, cusName, bussId, pageUrl, param} = that.handleItem(item)
                    item.orderType = name
                    item.quantity = item.quantity?parseFloat(item.quantity):''
                    if (item.num_type===1){
                        item.add_num = item.quantity
                    }else if (item.num_type===2){
                        item.reduce_num = item.quantity
                    }
                    item.cusName = cusName
                    item.bussId = bussId
                    item.pageUrl = pageUrl
                    item.param = param
                    if (item.id === 0){
                        item.orderType = '期初'
                    }
                    return item
                })
                that.flowList = that.flowList.concat(list)
                that.params.min_id = res.data.min_id
                that.total = res.data.total
                that.isLoading = false
            })
        },
        handleItem(item) {
            let type = item.type
            let name = '', cusName = '', bussId='', pageUrl='', param={};
            switch (String(type)){
                case '1':
                    name = '采购单'
                    bussId = item.purchase_detail.id
                    cusName = item.supplier_detail?item.supplier_detail.name:''
                    pageUrl = 'purchaseOrder'
                    param = { bussId5: bussId }
                    break;
                case '2':
                    name = '采购退货单'
                    bussId = item.purchase_returns_detail.id
                    cusName = item.supplier_detail?item.supplier_detail.name:''
                    pageUrl = 'purchaseReturn'
                    param = { bussId7: bussId }
                    break;
                case '3':
                    name = '销售单'
                    bussId = item.sale_order_detail.id
                    cusName = item.customer_detail?item.customer_detail.name:''
                    pageUrl = 'saleOrder'
                    param = { bussId8: bussId }
                    break;
                case '4':
                    name = '销售退货单'
                    bussId = item.sale_return_detail.id
                    cusName = item.customer_detail?item.customer_detail.name:''
                    pageUrl = 'saleReturn'
                    param = { bussId: bussId }
                    break;
                case '5':
                    name = '拆分单'
                    bussId = item.stock_split_detail.id
                    pageUrl = 'joinSplit'
                    param = { bussId4: bussId, type: 'split' }
                    break;
                case '6':
                    name = '组装单'
                    bussId = item.stock_join_detail.id
                    pageUrl = 'joinSplit'
                    param = { bussId4: bussId, type: 'join' }
                    break;
                case '7':
                    name = '盘点单'
                    bussId = item.stock_check_detail.id
                    pageUrl = 'stockTaking'
                    param = { bussId10: bussId}
                    break;
                default:
                    break;
            }
            return {name, cusName, bussId, pageUrl, param}
        },
        handleOrderInfo(item) {
            if (item.pageUrl){
                this.$router.push({
                    path: item.pageUrl,
                    query: item.param
                })
            }
        }
    }
}
</script>

<style lang="less" scoped>
    @import '../../style/mixin.less';
    .header {
        height: 120px;
        display: flex;
        align-items: center;
        gap: 16px;
        img {
            width: 100px;
            height: 100px;
        }
        .right {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            font-size: 14px;
        }
    }
</style>